<template>
  <plain-page
    style="width: 90%;margin: 4px auto;"
    @click.native="cert.visible = false"
  >
    <el-card
      shadow="never"
      :style="{
        'border-top': '2px solid',
        'border-top-color': StatusTag.colors[order.status]
      }"
      class="section"
      >
      <div>
        <span style="margin-right: 16px;">志愿者订单&nbsp;{{order.orderno}}</span>
        <status-tag :status="order.status" size="large" />

        <div class="operations">
          <el-popover
            v-if="order.status == 4 && process.endTime"
            v-model="cert.visible"
            placement="left-start"
            width="400"
            trigger="manual">
            <el-tooltip effect="dark" content="右键另存为" placement="right">
              <div>
                <el-image
                  v-if="cert.url"
                  :src="cert.url"
                  style="display: block"
                  @load="onCertImageLoad"
                  @error="cert.loading = false"
                />
              </div>
            </el-tooltip>
            <el-button
              slot="reference"
              type="danger"
              plain
              icon="el-icon-medal"
              :loading="cert.url && cert.loading"
              @click="onGenerateCertClick"
            >为志愿者制作荣誉证书</el-button>
          </el-popover>
          <el-button
            v-if="Review.canReview(order)"
            type="warning"
            round
            plain
            @click="onReviewClick()"
          >
            审核
          </el-button>
          <confirm-button
            v-if="[1,2,5].includes(order.status)"
            type="warning"
            round
            @ok="onCancelClick"
          >
            <p slot="content">确定取消订单？</p>
            取消
          </confirm-button>
          <delete-confirm-button
            icon
            :tooltip="{content: '删除订单'}"
            @ok="onDeleteClick"
          />
        </div>
      </div>
    </el-card>
    <el-card shadow="never" body-style="padding: 10px 20px;" class="section">
      <table class="info-table">
        <tr>
          <th>订单状态：</th>
          <td colspan="3">
            <status-tag size="small" :status="order.status" />
          </td>
        </tr>
        <tr>
          <th>所属任务：</th>
          <td colspan="3">
            <el-link
            type="primary"
            @click="onClickServiceId">{{order.serviceId}}</el-link>
          </td>
        </tr>
        <tr>
          <th>志愿者：</th>
          <td colspan="3">
            <el-link
              type="primary"
              @click="$refs.volunteerDetails.show(order.receiveUser)">{{process.volunteerName}}</el-link>
          </td>
        </tr>
        <tr>
          <th>身份证：</th>
          <td colspan="3">{{process.volunteerIdcard}}</td>
        </tr>
      </table>
    </el-card>
    <el-card v-show="order.status >= 0" shadow="never" class="section">
      <template slot="header">服务过程</template>
      <el-timeline style="padding-inline-start: 4px;">
        <el-timeline-item
          v-if="process.endTime"
          :timestamp="process.endTime.substring(0, 19)"
          placement="top"
          color="#67C23A"
        >
          <el-card shadow="never" body-style="padding: 0px 20px 20px;">
            <p><span style="font-weight:bold">完成服务</span>于<template v-if="process.endAddress">位置&nbsp;&nbsp;{{process.endAddress}}</template></p>
            <template v-if="process.endPicture">
              <el-image
                v-for="(url, index) in process.endPicture.split(',')"
                :key="index"
                :src="url"
                fit="cover"
                :preview-src-list="previewSrcs(process.endPicture, index)"
                class="flow-image"
              />
            </template>
          </el-card>
        </el-timeline-item>
        <el-timeline-item
          v-if="process.startTime"
          :timestamp="process.startTime.substring(0, 19)"
          placement="top"
          color="#409EFF"
        >
          <el-card shadow="never" body-style="padding: 0px 20px 20px;">
            <p><span style="font-weight:bold">开始服务</span>于<template v-if="process.startAddress">位置&nbsp;&nbsp;{{process.startAddress}}</template></p>
            <template v-if="process.startPicture">
              <el-image
                v-for="(url, index) in process.startPicture.split(',')"
                :key="index"
                :src="url"
                fit="cover"
                :preview-src-list="previewSrcs(process.startPicture, index)"
                class="flow-image"
              />
            </template>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
    <el-card v-show="order.status >= 0" shadow="never" body-style="padding: 10px 20px;" class="section">
      <table class="info-table">
        <tr>
          <th>分数评价：</th>
          <td colspan="3">
            <el-rate v-model="process.starLevel" disabled style="display:inline-block" />
            <template v-if="isNaN(process.starLevel)">（未评价）</template>
          </td>
        </tr>
        <tr>
          <th>文字评价：</th>
          <td colspan="3" style="height: 40px;word-break: break-all;">{{process.feedbackMessage}}</td>
        </tr>
      </table>
    </el-card>

    <volunteer-details ref="volunteerDetails" />
    <review ref="review" />
  </plain-page>
</template>

<script>
import StatusTag from './StatusTag';
import Review from './Review';

export default {
  pageProps: {
    title: ({params, subTitle}) => subTitle(params.order.orderno, '志愿者订单详情')
  },
  components: {
    VolunteerDetails: () => import('@/pages/volunteer/volunteer/VolunteerDetails'),
    StatusTag,
    Review
  },
  data() {
    return {
      order: this.$params.order,
      cert: {
        url: null,
        loading: true,
        visible: false
      },
      process: {},
      StatusTag,
      Review
    }
  },
  async mounted() {
    let ret = await this.$http.get('/api/volunteer/order/details', {params: {orderCode: this.$params.order.orderno}});
    this.order = ret.order;
    ret.process.startLevel = +ret.process.startLevel;
    this.process = ret.process;
  },
  methods: {
    onGenerateCertClick() {
      this.cert.visible = false;
      this.cert.loading = true;
      const { order } = this.$params;
      this.cert.url = '/api/volunteer/help/certificateOfHonor'
        + `?serviceId=${order.serviceId}&orderCode=${order.orderno}&t=${+new Date}`;
    },
    onCertImageLoad(event) {
      this.cert.loading = false;
      const image = event.path[0];
      const code = image.naturalWidth;
      if (code == 1) {
        this.$message.error('无法制作 原因是未查询到志愿者用户信息');
      } else if (code == 2) {
        this.$message.error('无法制作 原因是该社区还未设置证书模板');
      } else {
        this.cert.visible = true;
      }
    },
    onClickServiceId() {
      this.pushPage({
        path: '/volunteer/help/details',
        key: this.order.serviceId,
        params: {
          help: {
            orderStatus: this.order.status,
            ...this.order
          }
        }
      });
    },
    onReviewClick() {
      this.$refs.review.show([this.order], () => {
        this.selections = [];
        this.$refs.table.clearSelection();
      });
    },
    async onCancelClick() {
      const ret = await this.$http.post('/api/volunteer/order/cancel', { orderno: this.order.orderno });
      if (ret.success) {
        this.$message.success('取消成功');
        this.order.status = 3;
      }
    },
    async onDeleteClick() {
      const ret = await this.$http.post('/api/volunteer/order/delete',
        { orderno: this.order.orderno });
      if (ret.success) {
        this.$message.success('删除成功');
        this.$refs.table.reloadCurrentPage();
      }
    },
    previewSrcs(srcCsv, index) {
      const srcs = srcCsv.split(',');
      return srcs.slice(index).concat(srcs.slice(0, index));
    },
    onPagePause() {
      this.cert.visible = false;
    }
  }
}
</script>

<style scoped>
.section {
  position: relative;
  margin-top: 4px;
}
.section >>> .el-card__header {
  margin-bottom: 8px;
}

.operations {
  float: right;
}

.flow-image {
  width: 100px;
  height: 100px;
  margin-right: 8px;
  cursor: pointer;
  border-radius: 4px;
}
.info-table {
  width: 100%;
}
.info-table tr {
  height: 35px;
}
.info-table th {
  text-align: right;
  font-size: 14px;
  width: 70px;
  padding-right: 20px;
  font-weight: normal;
}
.info-table td {
  text-align: left;
  padding: 5px;
  font-size: 14px;
  line-height: 25px;
}
</style>